<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
		<title>Web前端技术</title>
	    <meta name="keywords" content="Web前端技术,Vue、ES6、Node.js、Angular.js、TypeScript、Redies、Ajax、Webpack、react、npm、element、HTML5、CSS3、微信小程序、前端主流技术导航链">
        <meta name="description" content="Web前端技术-关注web前端技术-Web前端技术导航链接">
        <style type="text/css">
		@charset "utf-8";
		body{font-family: "microsoft yahei"; font-size: 0.8rem; margin: 0;}
		li{list-style: none;}
		.uac{overflow: hidden;float: left; margin-top: 1rem; float: left; width: 31.3%;  margin-left: 1%; margin-right: 1%; }
		.bti{font-size: 1rem; font-weight: bold;color: #0091E4; overflow:hidden }
		.ucc{margin-top: 0.4rem; margin-right: 1.2rem;overflow: hidden; padding-bottom: 0.3rem; border-bottom: 1px dotted #dedede;}
		.ucc ul{padding: 0rem; margin: 0rem;}
		.ucc ul li{margin: 0rem; padding: 0rem; float: left; padding-right: 1.2rem; line-height: 23px;}
		.ucc ul li a{font-size:0.8rem; color: #666666; text-decoration: none;}
		.ucc ul li a:visited{font-size:0.8rem; color: #0000ff;; text-decoration: none;}
		.a{}
		@media screen and (min-width:1200px){
		  .main{margin: auto;margin-left: auto; margin-right: auto; width: 90%; overflow: hidden; margin-bottom: 2%;}
		  .uac{overflow: hidden;float: left; margin-top: 1rem; float: left; width: 31.3%;  margin-left: 1%; margin-right: 1%; }
		}
		@media screen and (min-width: 960px) and (max-width: 1199px) {
		   .main{margin: auto;margin-left: auto; margin-right: auto; width: 99%%; overflow: hidden; margin-bottom: 2%;}
		  .uac{overflow: hidden;float: left; margin-top: 1rem; float: left; width: 45.3%;  margin-left: 1%; margin-right: 1%; }
		}
		@media screen and (min-width: 768px) and (max-width: 959px) {
		     .main{margin: auto;margin-left: auto; margin-right: auto; width: 99%%; overflow: hidden;margin-bottom: 2%; }
		  .uac{overflow: hidden;float: left; margin-top: 1rem; float: left; width: 45.3%;  margin-left: 1%; margin-right: 1%; } 
		}
		@media only screen and (min-width: 480px) and (max-width: 767px){
		     .main{margin: auto;margin-left: auto; margin-right: auto; width: 99%%; overflow: hidden; margin-bottom: 2%;}
		  .uac{overflow: hidden;float: left; margin-top: 1rem; float: left; width: 100%;  margin-left: 1%; margin-right: 1%; }
		}
		@media only screen and (max-width: 479px) {
		     .main{margin: auto;margin-left: auto; margin-right: auto; width: 99%%; overflow: hidden; margin-bottom: 2%;}
		  .uac{overflow: hidden;float: left; margin-top: 1rem; float: left; width: 100%;  margin-left: 1%; margin-right: 1%; } 
		}
	</style>
	</head>
	<body>
	<div class="main">
		
	<div id="vueApp">
		<div class="uac">
			<div v-if="vue" class="bti">vue</div>
			<div class="ucc">
				<ul>
					<li v-for="vuega in vuegas"><a v-bind:href="vuega.url" target="_blank">{{vuega.title}}</a></li>
				</ul>
			</div>
		</div>
		
		<div class="uac">
			<div v-if="ES6" class="bti">ES6</div>
			<div class="ucc">
				<ul>
					<li v-for="ES6ga in ES6gas"><a v-bind:href="ES6ga.url" target="_blank">{{ES6ga.title}}</a></li>
				</ul>
			</div>
		</div>
		
		<div class="uac">
			<div v-if="Node" class="bti">node.js</div>
			<div class="ucc">
				<ul>
					<li v-for="Nodega in Nodegas"><a v-bind:href="Nodega.url" target="_blank">{{Nodega.title}}</a></li>
				</ul>
			</div>
		</div>
		
			<div class="uac">
			<div v-if="expressjs" class="bti">express.js</div>
			<div class="ucc">
				<ul>
					<li v-for="Expressga in Expressgas"><a v-bind:href="Expressga.url" target="_blank">{{Expressga.title}}</a></li>
				</ul>
			</div>
		</div>
		
		<div class="uac">
			<div v-if="angularjs" class="bti">angularjs</div>
			<div class="ucc">
				<ul>
					<li v-for="angularjsga in angularjsgas"><a v-bind:href="angularjsga.url" target="_blank">{{angularjsga.title}}</a></li>
				</ul>
			</div>
		</div>
		
		<div class="uac">
			<div v-if="TypeScript" class="bti">TypeScript</div>
			<div class="ucc">
				<ul>
					<li v-for="TypeScriptga in TypeScriptgas"><a v-bind:href="TypeScriptga.url" target="_blank">{{TypeScriptga.title}}</a></li>
				</ul>
			</div>
		</div>
		
		<div class="uac">
			<div v-if="redies" class="bti">redies框架</div>
			<div class="ucc">
				<ul>
					<li v-for="rediesga in rediesgas"><a v-bind:href="rediesga.url" target="_blank">{{rediesga.title}}</a></li>
				</ul>
			</div>
		</div>
		
		<div class="uac">
			<div v-if="Ajax" class="bti">Ajax</div>
			<div class="ucc">
				<ul>
					<li v-for="Ajaxga in Ajaxgas"><a v-bind:href="Ajaxga.url" target="_blank">{{Ajaxga.title}}</a></li>
				</ul>
			</div>
		</div>
		
		<div class="uac">
			<div v-if="webpack" class="bti">webpack</div>
			<div class="ucc">
				<ul>
					<li v-for="webpackga in webpackgas"><a v-bind:href="webpackga.url" target="_blank">{{webpackga.title}}</a></li>
				</ul>
			</div>
		</div>
		
		<div class="uac">
			<div v-if="react" class="bti">react</div>
			<div class="ucc">
				<ul>
					<li v-for="reactga in reactgas"><a v-bind:href="reactga.url" target="_blank">{{reactga.title}}</a></li>
				</ul>
			</div>
		</div>
		
		<div class="uac">
			<div v-if="npm" class="bti">npm</div>
			<div class="ucc">
				<ul>
					<li v-for="npmga in npmgas"><a v-bind:href="npmga.url" target="_blank">{{npmga.title}}</a></li>
				</ul>
			</div>
		</div>
		
		<div class="uac">
			<div v-if="element" class="bti">element</div>
			<div class="ucc">
				<ul>
					<li v-for="elementga in elementgas"><a v-bind:href="elementga.url" target="_blank">{{elementga.title}}</a></li>
				</ul>
			</div>
		</div>
		
		<div class="uac">
			<div v-if="HTML5" class="bti">HTML5</div>
			<div class="ucc">
				<ul>
					<li v-for="HTML5ga in HTML5gas"><a v-bind:href="HTML5ga.url" target="_blank">{{HTML5ga.title}}</a></li>
				</ul>
			</div>
		</div>
		
		<div class="uac">
			<div v-if="CSS3" class="bti">CSS3</div>
			<div class="ucc">
				<ul>
					<li v-for="CSS3ga in CSS3gas"><a v-bind:href="CSS3ga.url" target="_blank">{{CSS3ga.title}}</a></li>
				</ul>
			</div>
		</div>
		
		
	<div class="uac">
			<div v-if="webchat" class="bti">微信小程序</div>
			<div class="ucc">
				<ul>
					<li v-for="webchatga in webchatgas"><a v-bind:href="webchatga.url" target="_blank">{{webchatga.title}}</a></li>
				</ul>
			</div>
		</div>
		
		
		<div class="uac">
			<div v-if="Sass" class="bti">Sass</div>
			<div class="ucc">
				<ul>
					<li v-for="Sassga in Sassgas"><a v-bind:href="Sassga.url" target="_blank">{{Sassga.title}}</a></li>
				</ul>
			</div>
		</div>
		
		<div class="uac">
			<div v-if="stylus" class="bti">stylus</div>
			<div class="ucc">
				<ul>
					<li v-for="stylusga in stylusgas"><a v-bind:href="stylusga.url" target="_blank">{{stylusga.title}}</a></li>
				</ul>
			</div>
		</div>
		
		<div class="uac">
			<div v-if="Git" class="bti">Git</div>
			<div class="ucc">
				<ul>
					<li v-for="Gitga in Gitgas"><a v-bind:href="Gitga.url" target="_blank">{{Gitga.title}}</a></li>
				</ul>
			</div>
		</div>
		
		<div class="uac">
			<div v-if="json" class="bti">json</div>
			<div class="ucc">
				<ul>
					<li v-for="jsonga in jsongas"><a v-bind:href="jsonga.url" target="_blank">{{jsonga.title}}</a></li>
				</ul>
			</div>
		</div>
		
		<div class="uac">
			<div v-if="WebGL" class="bti">WebGL</div>
			<div class="ucc">
				<ul>
					<li v-for="WebGLga in WebGLgas"><a v-bind:href="WebGLga.url" target="_blank">{{WebGLga.title}}</a></li>
				</ul>
			</div>
		</div>
		
		<div class="uac">
			<div v-if="Egret" class="bti">Egret</div>
			<div class="ucc">
				<ul>
					<li v-for="Egretga in Egretgas"><a v-bind:href="Egretga.url" target="_blank">{{Egretga.title}}</a></li>
				</ul>
			</div>
		</div>
		
		<div class="uac">
			<div v-if="kjia" class="bti">框架</div>
			<div class="ucc">
				<ul>
					<li v-for="kjiaga in kjiagas"><a v-bind:href="kjiaga.url" target="_blank">{{kjiaga.title}}</a></li>
				</ul>
			</div>
		</div>
		
		
		<div class="uac">
			<div v-if="jqweui" class="bti">jqweui</div>
			<div class="ucc">
				<ul>
					<li v-for="jqweuiga in jqweuigas"><a v-bind:href="jqweuiga.url" target="_blank">{{jqweuiga.title}}</a></li>
				</ul>
			</div>
		</div>
		
		<div class="uac">
			<div v-if="jswz" class="bti">技术网站</div>
			<div class="ucc">
				<ul>
					<li v-for="jswzga in jswzgas"><a v-bind:href="jswzga.url" target="_blank">{{jswzga.title}}</a></li>
				</ul>
			</div>
		</div>
		
		<div class="uac">
			<div v-if="jswk" class="bti">技术外快</div>
			<div class="ucc">
				<ul>
					<li v-for="jswkga in jswkgas"><a v-bind:href="jswkga.url" target="_blank">{{jswkga.title}}</a></li>
				</ul>
			</div>
		</div>
		
		
		<div class="uac">
			<div v-if="xxsp" class="bti">学习视频</div>
			<div class="ucc">
				<ul>
					<li v-for="xxspga in xxspgas"><a v-bind:href="xxspga.url" target="_blank">{{xxspga.title}}</a></li>
				</ul>
			</div>
		</div>
		
		<div class="uac">
			<div v-if="mock" class="bti">前端后端分离模拟数据接口mock</div>
			<div class="ucc">
				<ul>
					<li v-for="mockga in mockgas"><a v-bind:href="mockga.url" target="_blank">{{mockga.title}}</a></li>
				</ul>
			</div>
		</div>
		
		<div class="uac">
			<div v-if="dmck" class="bti">代码仓库</div>
			<div class="ucc">
				<ul>
					<li v-for="dmckga in dmckgas"><a v-bind:href="dmckga.url" target="_blank">{{dmckga.title}}</a></li>
				</ul>
			</div>
		</div>
		
		<div class="uac">
			<div v-if="qdms" class="bti">前端面试</div>
			<div class="ucc">
				<ul>
					<li v-for="qdmsga in qdmsgas"><a v-bind:href="qdmsga.url" target="_blank">{{qdmsga.title}}</a></li>
				</ul>
			</div>
		</div>
		
		
		
		
		
	</div>
	
	
	
</div>
     <script>
        var vueApp = new Vue({
        el: '#vueApp',
        data: {
            vue: true,
            vuegas: [
                {url:"https://cn.vuejs.org/", title:'vue.js官方'},
                {url:"https://github.com/vuejs/vue-cli/tree/master", title:'vue尤雨溪地址'},
                {url:"https://cli.vuejs.org/", title:'vuejs'},
                {url:"https://vux.li/", title:'Vue移动端UI组件库'},
                {url:"https://www.iviewui.com/", title:'iviewui'},
                {url:"https://www.vue-js.com/", title:'vue中文社区'},
                {url:"https://cn.vuejs.org/v2/guide/", title:'vue教程'},
                {url:"http://www.jspang.com/archives/", title:'技术胖博客Vue'},
{url:"https://v.qq.com/x/search/?ses=qid%3DXoEu5NW_Z1s0VhUuDpOiAIJjJSYUDyDxTCoOktqmqCQykrPYpVFVow%26last_query%3DVue.js%26tabid_list%3D0%7C7%7C15%7C17%26tabname_list%3D%E5%85%A8%E9%83%A8%7C%E5%85%B6%E4%BB%96%7C%E6%95%99%E8%82%B2%7C%E6%B8%B8%E6%88%8F%26resolution_tabid_list%3D0%7C1%7C2%7C3%7C4%26resolution_tabname_list%3D%E5%85%A8%E9%83%A8%7C%E6%A0%87%E6%B8%85%7C%E9%AB%98%E6%B8%85%7C%E8%B6%85%E6%B8%85%7C%E8%93%9D%E5%85%89&q=Vue.js&stag=4&filter=sort%3D0%26pubfilter%3D0%26duration%3D0%26tabid%3D0%26resolution%3D0", title:'vue腾讯视频'},
                {url:"https://www.iqiyi.com/v_19rrcbl724.html", title:'vue爱奇艺视频'},
				{url:"http://so.iqiyi.com/so/q_vue?source=input&sr=80782944618", title:'vue爱奇艺搜索视频'},
				{url:"https://cdn.jsdelivr.net/npm/vue/dist/", title:'Vue导入JS包'},
				{url:"https://vue-loader-v14.vuejs.org/zh-cn/", title:'Vue Loader'},
				{url:"http://komavideo.com/", title:'小马视频'},
				{url:"https://gitee.com/komavideo/LearnVueJS", title:'Vue.js小马视频最新信息视频更新'},
				],
				
				
				ES6: true,
				ES6gas: [
				{url:"https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000", title:'JavaScript教程'},
				{url:"http://es6.ruanyifeng.com/#docs/intro", title:'ES6'},
				{url:"https://www.imooc.com/learn/955", title:'ES6快速入门_慕课网视频'},
				{url:"https://www.imooc.com/learn/935", title:'Vue+Webpack打造todo应用_慕课网视频'},
				{url:"https://www.imooc.com/learn/980", title:'vue2.5入门_慕课网视频'},
				],
				
				Node: true,
				Nodegas: [
				{url:"http://cnodejs.org/getstart", title:'node.js'}
				],
				
				expressjs:true,
				Expressgas:[
				{url:"http://www.expressjs.com.cn", title:'expressjs'}
				],
				
				angularjs: true,
				angularjsgas: [
				{url:"http://www.runoob.com/angularjs/angularjs-forms.html", title:'angularjs教程'},
				{url:"http://www.iphone3d.cn/", title:'angularjs社区'},
				{url:"https://www.oschina.net/question/tag/angularjs", title:'开源中国angularjs'},
				],
				
			    TypeScript: true,
				TypeScriptgas: [
				{url:"https://github.com/semlinker/awesome-typescript", title:'TypeScript'},
				{url:"https://ts.xcatliu.com/", title:'TypeScript入门教程'},
				{url:"https://gitee.com/komavideo/LearnTypeScript", title:'小马TypeScript'},
				{url:"https://gitee.com/komavideo/projects", title:'小马项目'},
				{url:"http://list.youku.com/albumlist/show/id_51957834", title:'TypeScript入门与理解'},
				],
				
			    redies: true,
				rediesgas: [
				{url:"https://www.douban.com/group/topic/102475525", title:'redies框架'}
				],
				
			    Ajax: true,
				Ajaxgas: [
				{url:"http://baijiahao.baidu.com/s?id=1588449672607885452&wfr=spider&for=pc", title:'Ajax'}
				],
				
			    webpack: true,
				webpackgas: [
				{url:"https://www.webpackjs.com/concepts/", title:'webpack'},
				{url:"https://thinkjs.org/doc/index.html", title:'ThinkJS'}
				],
				
				react: true,
				reactgas: [
				{url:"http://react-china.org/", title:'react'},
				{url:"https://www.oschina.net/question/tag/react", title:'开源中国React'},
				{url:"https://reactjs.org", title:'reactjs官方网站'},
				],
				
				npm: true,
				npmgas: [
				{url:"https://www.npmjs.com.cn/", title:'npm'}
				],
				
				element: true,
				elementgas: [
				{url:"http://element.eleme.io/#/zh-CN/component/installation", title:'element'}
				],
				
				HTML5: true,
				HTML5gas: [
				{url:"http://www.zzfriend.com/edu/", title:'HTML5'},
				{url:"https://www.oschina.net/question/tag/html5", title:'HTML5'},
				{url:"http://edu.zzfriend.com/html/html5-intro.html", title:'HTML5教程'},
				{url:"https://www.oschina.net/question/tag/html5", title:'HTML5问答'},
				],
				
				CSS3: true,
				CSS3gas: [
				{url:"http://lesscss.cn/", title:'lesscss'}
				],
				

				webchat: true,
				webchatgas: [
				{url:"bookmarks.html", title:'微信小程序资料'},
				{url:"bookmarks_2018_10_17.html", title:'微信小程序资料二'}
				],

				Sass: true,
				Sassgas: [
				{url:"https://www.sass.hk/", title:'Sass'},
				{url:"https://www.sasscss.com/", title:'Sass'}
				],
				
				stylus: true,
				stylusgas: [
				{url:"http://www.zhangxinxu.com/jq/stylus/", title:'stylus'}
				],
				
				Git: true,
				Gitgas: [
				{url:"https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000", title:'Git'}
				],
				
				json: true,
				jsongas: [
				{url:"http://www.runoob.com/json/json-tutorial.html", title:'json'}
				],
				
				WebGL: true,
				WebGLgas: [
				{url:"http://www.hewebgl.com/article/articledir/1", title:'WebGL'},
				{url:"https://www.cnblogs.com/bsman/p/6128447.html", title:'WebGL'}
				],
				
				Egret: true,
				Egretgas: [
				{url:"https://www.egret.com/", title:'Egret'}
				],
				
				kjia: true,
				kjiagas: [
				{url:"https://www.cnblogs.com/well-nice/p/5509589.html", title:'（淘宝无限适配）手机端rem布局详解'},
				{url:"https://github.com/amfe/lib-flexible", title:'flexible'},
				{url:"http://grace.hcoder.net/", title:'GraceUI 极速开发之旅兼容微信小程序、uni-app的优秀前端框架'}
				],
				
				jqweui: true,
				jqweuigas: [
				{url:"http://jqweui.com/", title:'weui'}
				],
				
				jswz: true,
				jswzgas: [
				{url:"https://segmentfault.com/", title:'segmentfault'},
				{url:"https://toutiao.io/", title:'开发者头条'},
				{url:"https://www.nowcoder.com/", title:'牛客网'},
				{url:"https://www.cnblogs.com/", title:'博客园'},
				{url:"https://www.jianshu.com/", title:'简书'},
				{url:"https://juejin.im/", title:'掘金'},
				{url:"https://www.oschina.net/", title:'开源中国'},
				{url:"https://www.awesomes.cn/", title:'前端库'},
				{url:"https://sdk.cn/", title:'极牛'},
				],
				
				jswk: true,
				jswkgas: [
				{url:"https://www.proginn.com/", title:'程序员客栈'},
				{url:"https://www.yuanjisong.com/", title:'猿急送'},
				{url:"https://mart.coding.net/", title:'码市'},
				{url:"http://www.zbj.com/", title:'猪八戒'},
				{url:"http://www.epwk.com/", title:'一品威客'},
				{url:"http://www.alimama.com/", title:'阿里妈妈'},
				{url:"https://mart.coding.net/", title:'码云'},
				{url:"https://shixian.com/", title:'实现网'},
				{url:"https://pro.lagou.com/", title:'大鲲'},
				{url:"https://zb.oschina.net/", title:'开源中国众包'},
				{url:"https://www.yingxuan.io/", title:'英选'},
				{url:"https://www.kuai.ma/", title:'快码'}
				],
				
				xxsp: true,
				xxspgas: [
				{url:"http://www.zike.com/", title:'自客'},
				{url:"https://study.163.com/", title:'网易云课堂'},
				{url:"https://ke.qq.com/", title:'腾讯云课堂'},
				{url:"http://www.jb51.net/", title:'脚本之家'},
				{url:"http://www.jikexueyuan.com/", title:'极客学院'},
				{url:"http://www.51cto.com/", title:'51CTO'},
				{url:"http://www.imooc.com/", title:'慕课网'},
				{url:"http://study.163.com/", title:'网易云课堂'}
				],
				
				mock: true,
				mockgas: [
				{url:"http://yapi.demo.qunar.com/", title:'为API开发者设计的管理平台'},
				{url:"http://mockjs.com/", title:'mock官方网站'},
				{url:"https://easy-mock.com/login", title:'easy-mock'}
				],
				
				dmck: true,
				dmckgas: [
				{url:"https://github.com/search?p=2&q=%E5%B0%8F%E7%A8%8B%E5%BA%8F&", title:'github.com'},
				{url:"https://gitee.com/", title:'码云'},
				{url:"https://gitee.com/komavideo", title:'小马视频VUE'}
				],
				
			    qdms: true,
				qdmsgas: [
				{url:"https://www.cnblogs.com/wangfupeng1988/p/4649709.html?tdsourcetag=s_pctim_aiomsg", title:'面试收藏'}
				],

        },
    });
    </script>
    
    
  <script type="text/javascript">
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'http') {
        bp.src = 'http://www.vuecss.com/push.js';
    }
    else {
        bp.src = 'http://vuecss.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
	</body>
</html>
